import React from 'react'
import ReactDOM from 'react-dom'
export default function Count(){

  const [count,setCount] = React.useState(0)  
  const [name,setName] = React.useState('Jimmy')  
  /*
    在函数式组件中的 this 指向的是 undefined 这个是react做了处理的
      React.useRef() 可以创建一个 ref 对象

      用法和React.createRef()的用法是基本一样的 
  */ 
  const inputRef = React.useRef()

  function addOne(){
    // setCount(count+1) 方法1 直接传递一个要改变的值
    setCount(preCount=>preCount+1) // 方法2 传递一个函数 返回值是要修改的值
  }

  function changeName(){
    setName('XUEXUE')
  }

  function showData(){
    /*
      ref.current = 绑定的元素
    */ 
    alert(inputRef.current.value)
  }

  
  
  function unMound(){
    // 卸载组件
    ReactDOM.unmountComponentAtNode(document.getElementById('root'))
  }

  return (
    <div>
      <h2>当前的值为：{count},{name}</h2>
      <input type="text" ref={inputRef}/>
      <button onClick={addOne}>点我+1</button>
      <button onClick={changeName}>点我改名</button>
      <button onClick={unMound}>卸载组件</button>
      <button onClick={showData}>展示数据</button>
    </div>
  )
}